<template>
	<div class='classList'>
		<div class="classList_tab">
			<u-tabs :list="list1" lineColor="#2E61FF" lineWidth="20"
				itemStyle="padding-left: 5%; padding-right: 5%; height: 44px;" :activeStyle="{
			    color: '#2E61FF',
			    fontWeight: 'bold',
			    transform: 'scale(1.05)'
			}" :inactiveStyle="{
			    color: '#999999',
			    transform: 'scale(1)'
			}" @change="changeEvent()"></u-tabs>
		</div>

		<div class="room_top_select">
			<div class="room_top_select_cont">
				<div class="room_top_select_items" v-for="(item,index) in list" :key="index" @click='closeEvent(index)'>
					<span v-if="index == 0">{{type?type:item.name}}</span>
					<span v-if="index == 1">{{time?time:item.name}}</span>

					<u-icon name="arrow-up" color='#ABABAB' size='13' style="margin-left: 20rpx;" v-if="shows == index">
					</u-icon>
					<u-icon name="arrow-down" color='#ABABAB' size='13' style="margin-left: 20rpx;" v-else></u-icon>

				</div>
			</div>

		</div>
		<div class="classTop">
			<classList :list='classPageList' @upDate='upDate' :isClass='2'></classList>
		</div>
		<!-- 下拉选择 -->
		<u-picker :show="show" :closeOnClickOverlay='true' @close='cancel' :columns="columnsStatus" @confirm='confirm'
			@cancel='cancel' keyName="label"></u-picker>
		<!-- 日期 -->
		<u-calendar :show="showTime" :mode="mode" @confirm="confirmTime" @close='showTime=false'></u-calendar>

	</div>
</template>

<style lang="less">
	.classList {
		.classList_tab {
			background: #fff;
			padding: 10rpx 0;
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;

		}

		.classTop {
			margin-top: 220rpx;
		}

		.room_top_select {
			display: flex;
			align-items: flex-start;
			justify-content: center;
			padding: 0 30rpx;
			box-sizing: border-box;
			width: 100%;
			height: 100rpx;
			margin-top: 120rpx;
			position: fixed;
			top: -22rpx;
			padding: 20rpx 0;
			box-sizing: border-box;
			background: #f5f5f5;

			.room_top_select_cont {
				background: #fff;
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				padding: 0 30rpx;
				box-sizing: border-box;
				width: 100%;
				height: 100rpx;
				box-sizing: border-box;
			}
		}

		.room_top_select_items {
			font-size: 28rpx;
			color: #666666;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 50%;

			span {
				margin-right: 10rpx;
			}
		}
	}
</style>


<script>
	import classList from '@/components/classList/index.vue'

	export default {
		components: {
			classList
		},
		// 0全部 1报名中 2已完成 3已评价 4已爽约
		data() {
			return {
				mode: 'single',
				list1: [{
					name: '全部',
					status: ''
				}, {
					name: '待上课',
					status: 1
				}, {
					name: '已上课',
					status: 2
				}, {
					name: '已取消',
					status: 0
				}, {
					name: '已爽约',
					status: 4
				}],
				page: 1,
				status: '',
				classPageList: [],
				pjshow: false,
				type: '',
				list: [{
					name: '课程筛选',
					status: 1,
				}, {
					name: '时间筛选',
					status: 1,
				}],
				shows: -1,
				show: false,
				showT: false,
				showTime: false,
				time: '',
				columnsStatus: [{
					label: '全部',
					id: 'all'
				}]
			}
		},
		onLoad() {
			this.getUserClass()
			this.getTypeList()
		},
		onReachBottom() {
			this.page++
			this.getUserClass()
		},
		onPullDownRefresh() {
			this.page = 1
			this.classPageList = []
			this.type = this.time = ''
			this.getUserClass()
		},
		methods: {
			confirmTime(e) {
				console.log(e);
				this.time = e[0]
				this.page = 1
				this.classPageList = []
				this.showTime = !this.showTime
				this.getUserClass()
			},
			cancel() {
				console.log(111)
				this.showT = this.show = false
				this.shows = -1
			},
			// 确认
			confirm(e) {
				this.type = e.value[0].label
				console.log('确认确认', e, this.type)
				this.page = 1
				this.classPageList = []
				this.show = false
				this.getUserClass()
			},
			async getTypeList() {
				const {
					data
				} = await this.$request(this.$Api.personType, {}, "POST")
				if (data.code !== 0) return
				uni.stopPullDownRefresh()
				data.data.type.forEach((current, index) => {
					data.data.type[index].label = current.title
					data.data.type[index].id = current.type_id
				})
				this.columnsStatus = [data.data.type]
				console.log('columnsStatus', this.columnsStatus)
			},
			closeEvent(e) {
				this.shows = e
				if (e == 0) {
					this.show = true
				} else if (e == 1) {
					this.showTime = true
				}
			},
			changeEvent(item) {
				console.log('changeEventchangeEventchangeEventchangeEvent', item.status);
				this.status = item.status
				this.page = 1
				this.classPageList = []
				this.getUserClass()
			},
			async getUserClass() {
				// 0已取消 1报名中 2已完成 3已评价 4已爽约
				const {
					data
				} = await this.$request(this.$Api.personClass, {
					page: this.page,
					status: this.status,
					time: this.time,
					type: this.type
				}, "POST")
				if (data.code !== 0) return
				this.classPageList = this.classPageList.concat(data.data.list)
			},
			upDate() {
				this.page = 1
				this.classPageList = []
				this.getUserClass()
			}
		}
	}
</script>
